<template>
    <el-dialog v-model="dialogFormVisible" :title='title' width="600px" align-center draggable>
        <div class="dialog-content">
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="formData.account" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" show-password />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="formData.sex" placeholder="请选择性别">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="身份" prop="identity">
                    <el-select v-model="formData.identity" placeholder="请选择身份" v-if="title == '新建超级管理员'">
                        <el-option label="超级管理员" value="超级管理员" />
                        <el-option label="院领导" value="院领导" />
                    </el-select>
                    <el-select v-model="formData.identity" placeholder="请选择身份" v-else-if="title == '新建管理员'">
                        <el-option label="管理员" value="管理员" />
                        <el-option label="辅导员" value="辅导员" />
                        <el-option label="审核小组" value="审核小组" />
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" />
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-select v-model="formData.department" placeholder="请选择部门">
                        <el-option v-for="(item, index) in departmentData" :label="item" :value="item" :key="index" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="addAdmin">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import {
    bus
} from "@/utils/mitt.js"
import { createAdmin } from '@/api/userinfo.js'
import { getDepartment } from '@/api/setting.js'
import { ElMessage } from 'element-plus'
const title = ref()
bus.on('createId', (id: number) => {
    Object.keys(formData).forEach((key) => {
        formData[key] = null;
    });
    if (id == 1) {
        title.value = '新建超级管理员'
        formData.identity = '超级管理员'
    }
    if (id == 2) {
        title.value = '新建管理员'
        formData.identity = '管理员'
    }
})
// 部门数据
const departmentData = ref([])
const returnDepartment = async () => {
    const res = await getDepartment()
    departmentData.value = res.data
}
returnDepartment()
// 表单数据接口
interface formData {
    account: number,
    password: string,
    name: string,
    sex: string,
    email: string,
    department: string,
    identity: string
}
// 表单数据
const formData: formData = reactive({
    account: null,
    password: '',
    name: '',
    sex: '',
    email: '',
    department: '',
    identity: ''
})
// 表单验证规则
const rules = reactive({
    account: [
        { required: true, message: '请输入管理员的注册账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入管理员的注册密码', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入管理员的名字', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '请输入管理员的性别', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入管理员的邮箱', trigger: 'blur' },
    ],
    department: [
        { required: true, message: '请输入管理员的部门', trigger: 'blur' },
    ],
})

// 创建管理员
const addAdmin = async () => {
    const res = await createAdmin(formData)
    if (res.data.status === 0) {
        ElMessage({
            message: '创建管理员成功',
            type: 'success',
        })
        dialogFormVisible.value = false
        bus.emit('offDialog',2)
    } else {
        ElMessage.error(res.data.message)
        dialogFormVisible.value = false
    }
}
// 弹窗开关
const dialogFormVisible = ref(false)

// 打开创建管理员的弹窗
const open = () => {
    dialogFormVisible.value = true
}

defineExpose({
    open
})

onBeforeUnmount(() => {
    bus.all.clear()
})
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    padding: 20px 30px;
}

:deep(.el-form-item) {
    margin: 30px;
}
</style>